<template>
  <div class="app-container">

    <el-button type="primary" @click="handleAddRole">新增</el-button>
      <div style="height:650px">
          <el-table :data="rolesList" v-loading='loading' style="width: 100%;margin-top:30px;" border>

            <el-table-column align="center" label="联系描述">
              <template slot-scope="scope">
                {{ scope.row.title }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="链接">
              <template slot-scope="scope">
                {{ scope.row.link }}
              </template>
            </el-table-column>

      
            <el-table-column align="center" label="增加时间">
              <template slot-scope="scope">
                {{ scope.row.updateTime }}
              </template>
            </el-table-column>


      
    
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleEdit(scope.row)">修改</el-button>
                  <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row)'>
                      <el-button slot="reference" type="danger">删除</el-button>
                  </el-popconfirm>
              </template>
            </el-table-column>

          </el-table>
      </div>


      <!-- 添加对话框 -->
    <el-dialog :visible.sync="createDialogVisible" @close="handleCancel" :close-on-click-modal="false" :title="isAddOrUpdata?'新增联系方式':'修改联系方式'">
                <el-form  :rules="rules"  ref="ruleForm" :model="ruleForm"  label-width="150px" v-loading='loading' >

                      <el-form-item label="title：" prop="title">
                        <el-input v-model="ruleForm.title" />
                      </el-form-item>

                      <el-form-item label="链接：" prop="qqNumber">
                        <el-input v-model="ruleForm.link" />
                      </el-form-item>

                      


                      <el-form-item>
                          <el-button @click="handleCancel">取消</el-button>
                          <el-button :loading='loading' type="primary" @click="handlePublish">保存</el-button>
                      </el-form-item>

                </el-form>
    </el-dialog>




    <el-pagination
            background
            layout="prev, pager, next,sizes,total"
            :total='total'
            @current-change='current_change'
            @size-change='size_change'
            style="text-align: center; margin-top: 60px;"
            :page-sizes="[10, 50, 100, 1000]"
            >
    </el-pagination>

  </div>
</template>

<script>
import api from '@/api/website/enginedownlink'
export default {
  name: 'enginedownlink',
  data() {
    return {
        isAddOrUpdata:true,//true新增false修改
        createDialogVisible:false,
        rolesList:[],
        total:0,
        limit:'',
        page:'',
        pages:'',
        loading:false,
        ruleForm: {
          title:'',
          link:'',
        },
        rules:{
          title: [{ required: true, message: '请输入title', trigger: 'blur' }],
          link: [{ required: true, message: '请输入链接', trigger: 'blur' }],

        }
    }
  },
  created() {
  
  },
  mounted(){
    this.getList()
  },
  methods: {

      handleAddRole(){//新增对话框
            this.isAddOrUpdata=true
            this.createDialogVisible = true
      },
      handlePublish() {//新增图片
          this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
              if(this.isAddOrUpdata){
                  this.Create(this.ruleForm)
              }else{
                  this.update(this.ruleForm)
              }
           
          } else {
            this.$message({
              message: '请检查数据必填项',
              type: 'warning'
            });
            return false
          }
        })
      },
      handleCancel(){
          this.createDialogVisible = false

          this.ruleForm. qqNumber=''
          this.ruleForm. title=''

      },
      handleEdit(e){
        this.isAddOrUpdata=false
        this.ruleForm.qqNumber=e.qqNumber,
        this.ruleForm.title=e.title,
        this.ruleForm.id=e.id
        this.ruleForm.link=e.link
        this.createDialogVisible = true
      },
      handleDelete(e){
         api.Delete(e).then(res=>{
            if(res.data.errno==0)
            {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getList()
            }
         })
      },
    current_change(e){
       this.page=e
       this.getList()
     },
     size_change(e){
       this.limit=e
       this.getList()
     },
    Create(e){
        this.loading = true
        api.create(e).then(res => {
            if(res.data.errno==0){
              this.loading = false
              this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.getList()
              this.createDialogVisible = false
            }
        }).catch((e) => {
          this.loading = false
          this.$message({
                message: e.data,
                type: 'warning'
              });
        })
    },
    update(e){
        this.loading = true
        api.update(e).then(res => {
            if(res.data.errno==0){
              this.loading = false
              this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getList()
              this.createDialogVisible = false
            }
        }).catch((e) => {
          this.loading = false
          this.$message({
                message: e.data,
                type: 'warning'
              });
        })
    },
    getList() {
      this.loading = true
      api.list().then(res => {
        if(res.data.errno==0){
                this.rolesList=res.data.data.list
                this.total=res.data.data.list.length
                this.page=res.data.data.page
                this.pages=res.data.data.pages
                this.total=res.data.data.total
                this.limit=res.data.data.limit
                this.loading=false
            }
      }).catch(() => {
        this.Loading = false
      })
    },
  }
}
</script>
<style lang="less" scoped>


</style>